<head>
    <meta charset="utf-8" />
    <title>表格</title>
</head>

<!-- 
    样式，无关内容，对于内容进行展示的改变
    例如：颜色、字体、大小、距离...

    bgcolor 样式
    align   样式

    问题
    1.样式设置是直接设置在标签上的，如果标签很多，且标签的样式有重复的，很多的重复代码
    2.样式设置和内容耦合在一起了，以后维护代码不方便

-->

<body>
    <table border="1px" cellspacing="0" cellpadding="10px" align="center">
        <caption>用户信息表</caption>

        <tr bgcolor="yellow">
            <th>姓名</th>
            <th>年龄</th>
            <th>所在地</th>
            <th>职业</th>
        </tr>
        <tr bgcolor="red" align="center">
            <td>张三</td>
            <td>23</td>
            <td>北京</td>
            <td>实习生</td>
        </tr>
        <tr bgcolor="green" align="center">
            <td>李四</td>
            <td>25</td>
            <td>天津</td>
            <td>工人</td>
        </tr>
        <tr bgcolor="red" align="center">
            <td>王五</td>
            <td>27</td>
            <td>南京</td>
            <td>工程师</td>
        </tr>
        <tr bgcolor="green" align="center">
            <td>赵六</td>
            <td>27</td>
            <td>杭州</td>
            <td>厨师</td>
        </tr>
    </table>
</body>

</html>